<template>
  <!-- 当前音乐的播放界面 -->
  <transition name="slide">
    <div class="player"
         v-if="music!=null&&lyric!=null">
      <scroll class="player-scroll"
              ref="scroll"
              :pull-up-load="true"
              @pullingUp='pullingUp()'>
        <!-- 歌曲图片，标题，歌词 -->
        <div class="player-content">
          <!-- 左边图片 -->
          <div class="left">
            <div class="play-bar-support">
              <img src="~assets/img/playmusic/play-bar-support.png"
                   alt />
            </div>
            <div class="play-bar"
                 :class="{bar:!isPlay}">
              <img src="~assets/img/playmusic/play-bar.png"
                   class="paly-bar"
                   alt />
            </div>
            <!-- 音乐封面 -->
            <div class="music-pic"
                 :class="{rotate:isPlay}">
              <div class="img-warp">
                <img :src="music.pic"
                     alt />
              </div>
            </div>
          </div>
          <!-- 右边标题歌词 -->
          <div class="right">
            <!-- 标题 -->
            <div class="top">
              <h2>
                <span>{{music.title}}</span>
              </h2>
            </div>
            <!-- 歌词 -->
            <div class="lyric">
              <lyric :lyric="lyric"
                     ref="playerLyric" />
            </div>
          </div>
          <!-- 清除浮动 -->
          <div class="clear"></div>
        </div>
        <!-- 评论 -->
        <div class="play-bottom">
          <recommends :recommends="recommends" />
        </div>
      </scroll>
    </div>
  </transition>
</template>

<script>
import Scroll from 'components/common/scroll/Scroll'
import Recommends from 'views/musicListDetail/childComps/Recommends'
import Lyric from './Lyric'
import { _getLyric, _musicRecommends } from 'network/detail'
export default {
  name: 'Player',
  components: { Scroll, Recommends, Lyric },
  props: {
    music: {
      type: Object,
      default () {
        return {}
      }
    },
    lyric: {
      type: String,
      default () {
        return ""
      }
    }
  },
  data () {
    return {
      isPlay: false,
      limit: 20,
      page: 1,
      recommends: []
    }
  },
  watch: {
    lyric () {
      // 判断歌词组件的滚动条是否存在,存在，滚动回到指定位置
      if (this.$refs.playerLyric.$refs.scroll != null) {
        this.$refs.playerLyric.$refs.scroll.scrollTo(0, 0, 0);
      }
      // 音乐评论
      _musicRecommends(this.music.id, this.limit).then(res => {
        this.recommends = res.data.comments;
      })
    }
  },
  methods: {
    // 下拉加载更多评论
    pullingUp () {
      this.musicRecommend();
    },
    musicRecommend () {
      _musicRecommends(this.music.id, this.limit * this.page).then(res => {
        this.recommends = res.data.comments;
        this.page++;
        // 滚动加载后，刷新页面
        this.$refs.scroll.finishPullUp();
        console.log(1);
      })
    }
  }

}
</script>

<style scoped>
.player {
  width: 100%;
  height: calc(100vh - 59px);
  position: absolute;
  top: calc(59px - 100vh);
  left: 0;
  padding: 20px 7%;
  box-sizing: border-box;
  background: linear-gradient(-45deg, #a5a5a7, #dfdcdc, #b4b4b4);
}
.player-scroll {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.player-content {
  width: 100%;
  height: 405px;
  position: relative;
  display: flex;
}
.play-bottom {
  width: 100%;
  height: 35%;
  color: #000;
  box-sizing: border-box;
  padding: 0px 5%;
}
.left {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.play-bar-support {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 0 3px #fff;
  position: absolute;
  z-index: 2;
  left: 0px;
  right: 0px;
  top: -8px;
  margin: auto;
}
.play-bar-support img {
  width: 100%;
}
.paly-bar {
  width: 80px;
  height: 127px;
  position: absolute;
  left: calc(50% - 22px);
  top: -5px;
  z-index: 1;
}
.bar {
  top: 10px;
  transform-origin: 0 0;
  transform: rotate(-25deg);
  transition: all 0.3s;
}
.music-pic {
  width: 230px;
  height: 230px;
  border: 40px solid #0e0e11;
  border-radius: 50%;
  box-shadow: 0 0 10px #fff;
  position: absolute;
  left: 0;
  right: 0;
  top: 70px;
  margin: auto;
}
.rotate {
  animation: rotate 20s linear infinite;
}
.img-warp {
  border: 5px solid #fff;
  border-radius: 50%;
}
.img-warp img {
  width: 100%;
  border-radius: 50%;
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(1turn);
  }
}
.right {
  flex: 1;
  height: 100%;
  float: left;
}
.clear {
  clear: both;
}
.top {
  color: #00aa85;
  font-weight: 300;
  padding: 10px 0px;
}
.top h2 span {
  margin-left: -8%;
}
.lyric {
  padding: 5px 0px;
  height: calc(100% - 55px);
  color: #5e6062;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s;
  transform: none;
}
.slide-enter,
.slide-leave-to {
  transform: translateY(100%);
}
</style>
